<template>
    <div>
        <!-- BannerList -->
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="轮播模式" name="swiper"></el-tab-pane>
            <el-tab-pane label="列表模式" name="table"></el-tab-pane>
        </el-tabs>
        <router-view :list="list" @refresh="getBannerList"></router-view>
</div>
</template>

<script>

import { getBannerListAPI } from "@/api/banner"

export default {
    name: "BannerList",
    data() {
        return {
            list: [],
            activeName:this.$route.meta.activeName
        }
    },
    methods: {
        async getBannerList() {
            var res = await getBannerListAPI()
            this.list = res.data;
            console.log(this.list);
        },
        handleClick(){
            // console.log(tab);  //被选中的tab实例
            // console.log(this.activeName);  //被选中的tab实例

            if(this.activeName == "swiper"){
                this.$router.push({name:"swiperMode"})
            }else if(this.activeName == "table"){
                this.$router.push({name:"tableMode"})
            }
           
        }
    },
    watch:{
        $route(){
            this.activeName = this.$route.meta.activeName;
        }
    },
    mounted() {
        this.getBannerList();
    }
}
</script>

<style lang="scss" scoped></style>